<template>
	<rootWithStateBarLayout :rightToolBarData="toolDataList" @onToolItemClick="onToolItemClick"
		:rightToolBarBgColor="toolBarBgColor">
		<view slot="pageContent" class="content-lay">
			<view class="header flex-h">
				<view class="flex-h" style="align-items: center">
					<image @click="navigateBack" class="back-image" src="/static/imgs/tools/icon_nav_back_dark@2x.png">
					</image>

					<view class="header-name-lay flex-h">
						<text class="header-name">{{$t("visualShow.macTypeStr")}}：</text>
						<text
							class="header-value header-value-oth">{{selectTableData ? selectTableData.mac_numb : '--'}}</text>
					</view>
				</view>
				<image class="back-image" src="/static/imgs/tools/icon_menu_initial_state@2x.png"></image>
			</view>
			<view class="work-lay flex-h">
				<drawingBasicFun ref="drawingBasicFun" class="draw-content" 
					:svgOption="svgOption" :needScreenShot="false"
					:selectedShapeId="selectedShapeId"
					:lineColor="lineColor" :lineWidth="lineWidthState" :fontSize="fontSizeState"
					:svgMarkupFileUrl="svgMarkupFileUrl"
					@onMarkupSelected="onMarkupSelected"
					:canEditSelectMarkup="isCanEditSelectMarkup"
					@onGetMarkupStr="onGetMarkupStr"/>
			</view>
		</view>
	</rootWithStateBarLayout>
</template>

<script>
	import {
		genLocalDrawPath
	} from "@/localService/index.js";
	
	import {
		getFileName
	} from "@/utils/fileUtil.js";
	
	import {
		getMarkupFilePathEntry,
		saveMarkupFile
	} from "@/localService/markupFileService.js";
	
	import rootWithStateBarLayout from "@/_components/rootWithStateBarLayout.vue";
	import drawingBasicFun from "@/_components/drawing/drawingBasicFun.vue";
	import selectData from "@/common/visual_add_markup_data.js";
	export default {
		components: {
			rootWithStateBarLayout,
			drawingBasicFun
		},

		data() {
			return {
				/**
				 * 前个页面选中的列表项
				 */
				selectTableData: {},
				
				/**
				 * 图纸地址
				 */
				svgOption: {
					svgSourcePath: "",
					svgSourceUrl: "",
				},
				svgMarkupFileUrl: '',
				isCanEditSelectMarkup: false,

				toolBarBgColor: "#FFA000",
				toolDataList: selectData.toolEntry,

				drawState: 0, // 0:不编辑状态;1:手绘;2:文字;3:文字绘制
				lineColorState: 1,
				lineWidthState: 1,
				fontSizeState: 1,

				selectedShapeId: 0,
				lineColor: "",

			}
		},

		watch: {
			drawState: {
				handler(v, oldName) {
					this.toolDataList[0].forEach(e => {
						if (v == 0) {
							if (e.type == "addHandDraw" || e.type == "addText") {
								e.disable = true;
							} else {
								e.disable = false;
							}
							this.selectedShapeId = 0;
						} else if (v == 1) {
							if (e.type == "fontUp" || e.type == "fontDown" ||
								e.type == "delete" || e.type == "addText") {
								e.disable = true;
							} else {
								e.disable = false;
							}
							this.selectedShapeId = 8;
						} else if (v == 2) {
							if (e.type == "delete" || e.type == "addHandDraw") {
								e.disable = true;
							} else {
								e.disable = false;
							}
							this.selectedShapeId = 17;
						}
					})
					this.toolDataList[1].forEach(e => {
						if (v == 0) {
							if (e.type == "addHandDraw" || e.type == "addText") {
								e.disable = true;
							} else {
								e.disable = false;
							}
						} else if (v == 1) {
							if (e.type == "fontUp" || e.type == "fontDown" ||
								e.type == "delete" || e.type == "addText") {
								e.disable = true;
							} else {
								e.disable = false;
							}
						} else if (v == 2) {
							if (e.type == "delete" || e.type == "addHandDraw") {
								e.disable = true;
							} else {
								e.disable = false;
							}
						}
					})
					this.toolDataList = JSON.parse(JSON.stringify(this.toolDataList))
				},
				immediate: true,
				deep: true
			}
		},

		onReady() {
			let _self = this;
			this.selectTableData = getApp().globalData.selectListItemData;
			
			/**
			 * 获取图纸本地地址
			 */
			genLocalDrawPath(this.selectTableData.drw_pass, this.selectTableData.plt_path).then(e => {
				this.$nextTick(function() {
					_self.svgOption.svgSourcePath = e;
					_self.svgOption.svgSourceUrl = e;
					_self.requireGetMarkupFilePathEntry();
				})
			});
			
			this.updateLineColorToolImage();
			this.updateLineWidthToolImage();
		},

		methods: {
			requireGetMarkupFilePathEntry() {
				console.log("requireGetMarkupFilePathEntry   ---   ");
				let dateStr = (new Date()).Format("yyyyMMdd");
				console.log("requireGetMarkupFilePathEntry   ---   " + dateStr );
				
				let fileName = getFileName(this.selectTableData.drw_pass);
				let _self = this;
				getMarkupFilePathEntry(this.selectTableData.plt_path , fileName ,/*"20210805"*/ dateStr).then(e => {
					console.log("requireGetMarkupFilePathEntry   --- re  ")
					console.log(e)
					
					_self.svgMarkupFileUrl = e;
					_self.isCanEditSelectMarkup = true;
				});
			},
			
			saveMarkupFileApi(inContentStr , inFun) {
				console.log("saveMarkupFileApi   ---   ");
				let dateStr = (new Date()).Format("yyyyMMdd");
				console.log("saveMarkupFileApi   ---   " + dateStr );
				
				let fileName = getFileName(this.selectTableData.drw_pass);
				let _self = this;
				saveMarkupFile(this.selectTableData.plt_path , fileName ,/*"20210805"*/ dateStr , inContentStr).then(e => {
					console.log("saveMarkupFileApi   --- re  ")
					console.log(e);
					inFun();
				});
			},
			
			navigateBack() {
				// let strContent = svg_opt.genMarkupsContent(this.markupFileBaseData);
				// console.log(strContent);
				let _self = this;
				uni.showModal({
				    title: _self.$t("visualEdit.saveModal.saveTitle"),
				    content: _self.$t("visualEdit.saveModal.saveTip"),
					confirmText: _self.$t("public.confirm"),
					cancelText: _self.$t("public.cancel"),
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							_self.$refs.drawingBasicFun.onGetMarkupStart();
				        } else if (res.cancel) {
				            console.log('用户点击取消');
							uni.navigateBack();
				        }
				    }
				});
			},

			updateLineColorToolImage(inColor) {
				let _self = this;
				this.toolDataList[0].forEach(e => {
					if (e.type == "lineColor") {
						e.candidateImage.forEach(sube => {
							if (inColor) {
								if (sube.color == inColor) {
									e.image = sube.image;
									_self.lineColor = sube.color;
									_self.lineColorState = sube.key;
								}
							} else if (sube.key == _self.lineColorState.toString()) {
								e.image = sube.image;
								_self.lineColor = sube.color;
							}
						})
					}
				})
			},

			updateLineWidthToolImage() {
				let _self = this;
				this.toolDataList[0].forEach(e => {
					if (e.type == "lineWidth") {
						e.candidateImage.forEach(sube => {
							if (sube.key == _self.lineWidthState.toString())
								e.image = sube.image;
						})
					}
				})
			},

			onToolItemClick(e) {
				if (e == "lineColor") {
					if (this.lineColorState < 5)
						this.lineColorState++;
					else
						this.lineColorState = 1;
					this.updateLineColorToolImage();
				}
				if (e == "lineWidth") {
					if (this.lineWidthState < 4)
						this.lineWidthState++;
					else
						this.lineWidthState = 1;
					this.updateLineWidthToolImage();
				} else if (e == "fontUp") {
					if (this.fontSizeState < 4)
						this.fontSizeState++;
					else
						this.fontSizeState = 1;
				} else if (e == "fontDown") {
					if (this.fontSizeState <= 1)
						this.fontSizeState = 5;
					else
						this.fontSizeState--;
				} else if (e == "addHandDraw") {
					if (this.drawState == 1)
						this.drawState = 0;
					else
						this.drawState = 1;

				} else if (e == "addText") {
					if (this.drawState == 2)
						this.drawState = 0;
					else
						this.drawState = 2;
				} else if (e == "delete") {
					// svg_opt.tryDeleteSelectMarkup();
					this.$refs.drawingBasicFun.onDelClick();
				}
			},

			onMarkupSelected(e) {
				console.log("onMarkupSelected")
				console.log(e)
				this.lineWidthState = e.lineWidth;
				this.updateLineColorToolImage(e.lineColor);
				this.updateLineWidthToolImage();
				// this.lineColorState = e.lineWidth;
			},
			
			onGetMarkupStr(e) {
				let _self = this;
				this.saveMarkupFileApi(e , () => {
					uni.navigateBack();
					uni.showToast({
						title:'获取到 markup 字符串！！！',
					})
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-lay {
		// background: #fff;
		width: 100%;
	}

	.header {
		box-sizing: border-box;
		background-color: #fff;
		padding: 10px 5px;
		height: 42px;
		align-items: center;
		justify-content: space-between;

		.back-image {
			width: 17upx;
			height: 17upx;
			margin-right: 5upx;
		}

		.header-name-lay {
			align-items: center;
			margin-right: 9upx;

			.header-name {
				font-size: 11upx;
				color: #1f2329;
				font-weight: 400;
			}

			.header-value {
				background: #fdfacc;
				border-radius: 1upx;
				border: 1px solid #cfd3d5;
				padding: 0 9upx;
				font-weight: 400;
				font-size: 11upx;
				color: #333333;
				line-height: 25upx;
			}

			.header-value-oth {
				width: 168upx;
			}

			.fs-ot {
				font-weight: 500;
				color: #231df7;
			}
		}
	}

	.work-lay {
		box-sizing: border-box;
		justify-content: space-between;
		width: 100%;
		height: calc(100% - 42px);
		align-items: center;
		padding: 9upx;

		.draw-content {
			width: 100%;
		}
	}
</style>
